<!--
 * @Author: your name
 * @Date: 2021-02-23 16:07:54
 * @LastEditTime: 2021-02-24 09:12:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-cloud\src\views\AlarmProposal.vue
-->
<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('troubleshooting')" left-arrow fixed @click-left="onClickLeft" />
      <div class="alarm-main-box">
          <div>{{$t('troubleshooting.Reason')}}</div>
          <div class="color-ccc">{{errorMsgList.reason || '-'}}</div>
          <van-divider />
          <div>{{$t('troubleshooting.Suggestion')}}</div>
          <div class="color-ccc word-break">{{errorMsgList.userSuggestion || '-'}}</div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      deviceType:this.$route.query.deviceType,
      alarmName:this.$route.query.alarmName,
      errorMsgList:{}
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/main/alarm'});
    },
    async alarmGetAlarmMsg(){
      let res = await this.API.alarmGetAlarmMsg(localStorage.getItem('domain'),{
        deviceType:this.deviceType,
        alarmName:this.alarmName,
      })
      this.errorMsgList = res
    }
  },
  mounted(){
    this.alarmGetAlarmMsg()
  }
}
</script>

<style scoped lang="less">
.alarm-main-box{
  text-align: left;
  padding: 10px 10px 0px 10px;
  background-color: #fff;
  div{
    padding: 10px 0px;
  }
  .color-ccc{
    color: #a9a9a9;
  }
  .word-break{
    word-break:break-all;
  }
}
</style>
